<script setup>
import { ref, reactive } from 'vue'
import { Plus, Download, Upload } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import LayoutRightContainer from '@/views/layout-right-container.vue'
import { fetchSystemStyle, saveSystemStyle } from '@/api/system.services'
const breadcrumb = ref([
    { label: '系统管理' },
    { label: '个性化设置' }
])
const addForm = ref({})
const submit = async () => {
    const valid = await addFormRef.value.validate()
    if (!valid) return
    const result = await saveSystemStyle(addForm.value)
    if (result.code == 1) {
        ElMessage.success('更新成功')
    }
}
const initSystemStyle = async () => {
    const result = await fetchSystemStyle()
    if (result.code == 1) {
        addForm.value = result.data
    }
}
const addFormRef = ref(null)
const rules = reactive({
    //定义验证规则，有两种方式：
    //1.使用ele原生的验证规则。
    name: [{ required: true, message: '请输入系统名称', trigger: 'blur' }],
    logo: [{ required: true, message: '请上传平台logo', trigger: 'change' }],
    background_img: [{ required: true, message: '请上传背景图片', trigger: 'change' }]
})
const beforeLogoUpload = (file) => {
    var reader = new FileReader()
    reader.onload = function (e) {
        addForm.value.logo = reader.result
    }
    reader.readAsDataURL(file.raw)
}
const beforeBackgroundUpload = (file) => {
    var reader = new FileReader()
    reader.onload = function (e) {
        addForm.value.background_img = reader.result
    }
    reader.readAsDataURL(file.raw)
}
const handleUpload = (file) => {
    console.log('handleUpload', file)
}
initSystemStyle()

</script>
<template>
    <LayoutRightContainer :breadcrumb="breadcrumb">
        <div :class="$style['main-container']">
            <div :class="$style['title']">个性化设置</div>
            <el-form :model="addForm" label-width="auto" :class="$style['form-wrapper']" :rules="rules"
                ref="addFormRef">
                <el-form-item label="系统名称:" prop="name">
                    <el-input v-model="addForm.name" placeholder="系统名称" />
                </el-form-item>
                <el-form-item label="系统logo:" prop="logo">
                    <el-upload :class="$style['logo-uploader']" :show-file-list="false" :on-change="beforeLogoUpload"
                        :http-request="handleUpload">
                        <img :src="addForm.logo" :class="$style['logo-avatar']"
                            v-if="addForm.logo && typeof addForm.logo === 'string'" />
                        <el-icon :class="$style['avatar-uploader-icon']" v-else>
                            <Plus />
                        </el-icon>
                    </el-upload>
                </el-form-item>
                <el-form-item label="登录页背景:" prop="background_img">
                    <el-upload :class="$style['background-uploader']" :show-file-list="false"
                        :on-change="beforeBackgroundUpload" :http-request="handleUpload">
                        <img :src="addForm.background_img" :class="$style['avatar']"
                            v-if="addForm.background_img && typeof addForm.background_img === 'string'" />
                        <el-icon :class="$style['avatar-uploader-icon']" v-else>
                            <Plus />
                        </el-icon>
                    </el-upload>
                </el-form-item>
                <el-form-item :class="$style['button-wrapper']">
                    <el-button type="primary" @click="submit">保存</el-button>
                </el-form-item>
            </el-form>
        </div>
    </LayoutRightContainer>
</template>
<style lang="scss" module>
.main-container {
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 8px;
    height: 100%;
    padding: 0 20px;
    overflow-y: auto;
    @include scrollbar;
}

.title {
    height: 50px;
    line-height: 50px;
    font-size: 16px;
    font-weight: 600;
    color: #333;
}

.form-wrapper {
    flex: 1;
    overflow: hidden;
    width: 500px;
    display: flex;
    flex-direction: column;

    & [class~='el-form-item'] {
        margin-bottom: 10px;
    }

    & [class~='el-input'] {
        width: 100%;
    }
}

.logo-uploader {
    width: 120px;
    height: 120px;
}

.background-uploader {
    width: 280px;
    height: 120px;
}

.logo-avatar {
    width: 120px;
    height: 120px;
    display: block;
    border: 1px dashed var(--el-border-color);
}

.avatar {
    width: 280px;
    height: 120px;
    display: block;
    border: 1px dashed var(--el-border-color);
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #ccc;
    width: 120px;
    height: 120px;
    text-align: center;
    border: 1px dashed var(--el-border-color);
}

.button-wrapper {
    height: 50px;
    width: 100%;
    margin-bottom: 0 !important;

    & [class~='el-form-item__content'] {
        width: 100%;
        display: flex;
        justify-content: center;
    }

    & [class~='el-button'] {
        width: 150px;
    }
}

.line {
    height: 1px;
    background: #e5e5e5;
    margin: 10px 0;
}

.table-wrapper {
    flex: 1;
}

.table-tools {
    & [class~='el-link'] {
        margin-right: 15px;
    }
}
</style>
